<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title>YTUI-BUTTON</title>
    <link rel="stylesheet" href="../css/ytui.css" />
    <script src="../js/html-size-calculation.js"></script>
    <style>
        .font-icon-wrap .icon {
            font-size: 1.6rem;
            margin-bottom: 0.4rem
        }
        
        .font-icon-wrap .yt-f1 {
            border: 1px solid #e3e3e3;
            margin-left: -1px;
            margin-top: -1px;
            padding: 1rem 0.2rem
        }
        
        .font-icon-wrap .yt {
            display: flex
        }
    </style>
</head>

<body class="header-fixed">
    <header class="header-bar bg-main">
        <a href="../index.html" class="header-left">
            <i class="icon icon-pre"></i>
            <span class="fz28">返回</span>
        </a>
        <h2 class="header-title">fontIcon</h2>
    </header>
    <section class="font-icon-wrap">
        <div class="yt">
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-doc"></i>
                <p class="fz24">.icon-doc</p>
            </div>
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-map"></i>
                <p class="fz24">.icon-map</p>
            </div>
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-save"></i>
                <p class="fz24">.icon-save</p>
            </div>
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-pencil"></i>
                <p class="fz24">.icon-pencil</p>
            </div>
        </div>
        <div class="yt">
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-user"></i>
                <p class="fz24">.icon-user</p>
            </div>
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-user1"></i>
                <p class="fz24">.icon-user1</p>
            </div>
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-user2"></i>
                <p class="fz24">.icon-user2</p>
            </div>
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-useradd"></i>
                <p class="fz24">.icon-user2</p>
            </div>

        </div>

        <div class="yt">
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-users"></i>
                <p class="fz24">.icon-users</p>
            </div>
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-edit"></i>
                <p class="fz24">.icon-edit</p>
            </div>
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-del"></i>
                <p class="fz24">.icon-del</p>
            </div>
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-home"></i>
                <p class="fz24">.icon-home</p>
            </div>
        </div>
        <div class="yt">

            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-search"></i>
                <p class="fz24">.icon-search</p>
            </div>
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-card"></i>
                <p class="fz24">.icon-card</p>
            </div>
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-lock"></i>
                <p class="fz24">.icon-lock</p>
            </div>
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-next"></i>
                <p class="fz24">.icon-next</p>
            </div>
        </div>
        <div class="yt">
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-pre"></i>
                <p class="fz24">.icon-pre</p>
            </div>

            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-up"></i>
                <p class="fz24">.icon-up</p>
            </div>
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-down"></i>
                <p class="fz24">.icon-down</p>
            </div>
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-plane"></i>
                <p class="fz24">.icon-plane</p>
            </div>
        </div>
        <div class="yt">
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-set"></i>
                <p class="fz24">.icon-set</p>
            </div>
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-heart"></i>
                <p class="fz24">.icon-heart</p>
            </div>
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-comment"></i>
                <p class="fz24">.icon-comment</p>
            </div>
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-menu"></i>
                <p class="fz24">.icon-menu</p>
            </div>
        </div>
        <div class="yt">
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-add"></i>
                <p class="fz24">.icon-add</p>
            </div>
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-add1"></i>
                <p class="fz24">.icon-add1</p>
            </div>
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-briefcase"></i>
                <p class="fz24">.icon-briefcase</p>
            </div>
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-chart"></i>
                <p class="fz24">.icon-chart</p>
            </div>
        </div>
        <div class="yt">
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-pwd"></i>
                <p class="fz24">.icon-pw</p>
            </div>
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-message"></i>
                <p class="fz24">.icon-message</p>
            </div>
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-phone"></i>
                <p class="fz24">.icon-phone</p>
            </div>
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-more"></i>
                <p class="fz24">.icon-more</p>
            </div>
        </div>
        <div class="yt">
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-lightbulb"></i>
                <p class="fz24">.icon-lightbulb</p>
            </div>
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-star"></i>
                <p class="fz24">.icon-star</p>
            </div>
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-return-up"></i>
                <p class="fz24">.icon-return-up</p>
            </div>
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-arrow-down"></i>
                <p class="fz24">.icon-arrow-down</p>
            </div>
        </div>
        <div class="yt">
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-arrow-up"></i>
                <p class="fz24">.icon-arrow-up</p>
            </div>
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-close"></i>
                <p class="fz24">.icon-close</p>
            </div>
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-account"></i>
                <p class="fz24">.icon-account</p>
            </div>
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-ok"></i>
                <p class="fz24">.icon-ok</p>
            </div>
        </div>
        <div class="yt">
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-time"></i>
                <p class="fz24">.icon-time</p>
            </div>
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-map-marker"></i>
                <p class="fz24">.icon-map-marker</p>
            </div>
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-module"></i>
                <p class="fz24">.icon-module</p>
            </div>
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-share"></i>
                <p class="fz24">.icon-share</p>
            </div>
        </div>
        <div class="yt">
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-laud"></i>
                <p class="fz24">.icon-laud</p>
            </div>
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-sex"></i>
                <p class="fz24">.icon-sex</p>
            </div>
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-sex-m"></i>
                <p class="fz24">.icon-sex-m</p>
            </div>
            <div class="yt-f1 font-color-main tx-c">
                <i class="icon icon-sex-w"></i>
                <p class="fz24">.icon-sex-w</p>
            </div>
        </div>
    </section>
</body>

</html>